<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-form size="small" label-position="top" label-width="120px" v-loading="loading">
            <el-form-item required label="分类名称" label-position="left">
                <el-input style="width: 200px" v-model="album.name" required />
            </el-form-item>

            <el-form-item required label="厂房">
                <posts-selector v-model="album.post_ids"></posts-selector>
            </el-form-item>

            <el-form-item required label="转发分享文案">
                <el-input style="width: 200px" v-model="album.title" required />
            </el-form-item>

            <div v-show="showMore">
                <el-form-item label="简介">
                    <el-input type="textarea" maxlength="100" :rows="5" v-model="album.content" show-word-limit />
                </el-form-item>

                <el-form-item label="配图">
                    <image-picker width="200" height="150" v-model="album.cover"></image-picker>
                </el-form-item>

                <!-- <el-form-item label="KEY">
                    <el-input v-model="album.key" />
                </el-form-item> -->
            </div>

            <div class="show-more">
                <el-link type="primary" @click="() => (showMore = !showMore)">
                    <i class="el-icon-arrow-down"></i> {{ showMore ? "收起" : "更多设置" }}
                </el-link>
            </div>

            <el-form-item size="large">
                <el-button type="default" @click="cancleHandle">取消</el-button>
                <el-button :disabled="!album.name" type="primary" @click="submitHandle">{{
                    album.id ? "保存修改" : "创建分类"
                }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
</style>

<script>
import ImagePicker from "@/components/ImagePicker";
import PostsSelector from "@/components/PostsSelector";
import { updateAlbum, createAlbum } from "@/api/post";
export default {
    name: "AlbumForm",
    components: { ImagePicker, PostsSelector },
    props: {
        album: { type: Object, value: null },
    },
    data () {
        return {
            loading: false,
            showMore: false,
        };
    },
    watch: {},
    methods: {
        cancleHandle: function () {
            this.$emit("cancle", null);
        },
        submitHandle: function () {
            var isok = this.validate(this.album);
            if (!isok) {
                return;
            }
            var isNew = !this.album.id;
            if (isNew) {
                return this.doCreate();
            }
            return this.doUpdate();
        },

        doCreate: function () {
            this.loading = true;
            createAlbum(this.album).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("创建成功");
                    this.loading = false;
                    this.$emit("change", {});
                }
            }).catch((err) => {
                this.loading = false
                console.log(err);
            });
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            updateAlbum(this.album).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    _this.loading = false;
                }
            }).catch((err) => {
                this.loading = false
                console.log(err);
            });
        },
        removeCover: function () {
            this.album.cover = "";
        },

        validate: function (data) {
            if (!data.name || data.name.length <= 2) {
                this.$message.error("分类名称不能少于2个字");
                return false;
            }

            return true;
        },
    },
};
</script>
